<template>
  <div class="wechatApp">
    <tabs
      :tabPane="tabPaneList"
      @tab-click="handleClick"
      v-model="activeName"
      :oprateArr="handleOprateArr">
    </tabs>
    <component :is="activeName" :ref='activeName' @handle-oprate="handleOprate"></component>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import tabs from '@/components/configCommon/configTabs.vue'
import { isHasFuncOrMenus } from '@/utils/common'
import accessList from '@/views/config/webchat/channel/wechat/accessList.vue'
@Component({
  name: 'wechat',
  components: {
    tabs,
    accessList
  }
})
export default class Wechat extends Vue {
  private $store: any
  private activeName: string = 'accessList'

  private handleOprateArr = []

  private tabPaneList: any = [
    { label: '接入列表', name: 'accessList', _id: 'wechat_access_list' }
  ]

  private handleClick (item: any) {
    this.$set(this, 'handleOprateArr', [])
  }

  private handleOprate (list: any) {
    this.$set(this, 'handleOprateArr', list || [])
  }

  private mounted () {
    // 权限处理
    const arr = ['wechat_access_list'] //  接入列表
    const newArr: any[] = []
    arr.forEach((item: string) => {
      if (isHasFuncOrMenus(item, this.$store.state.common.session.user, true)) {
        newArr.push(item)
      }
    })
    this.tabPaneList = this.tabPaneList.filter(item => newArr.indexOf(item._id) > -1)
    this.activeName = this.tabPaneList[0] ? this.tabPaneList[0].name : 'wechat_access_list'
  }
}
</script>
<style lang="stylus" scoped>
  .wechatApp
    height 100%
</style>
